<template>
  <div>
    <!-- <el-input v-model="path" placeholder="上传图片的路径，可为空"></el-input> -->
    <!-- <el-upload
          style="display: inline-block"
          action="string"
          :limit="1"
          :file-list="fileList"
          :on-error="loadFileError"
          :on-success="loadFileSuccess"
          :before-upload="beforeUpload"
          accept=".png,.jpg"
          :show-file-list="false"
          :http-request="uploadFile"
          ><el-button type="success">导入</el-button></el-upload
        > -->

        <el-upload
          :limit="1"
          :file-list="fileList"
          accept=".png,.jpg"
          :http-request="uploadFile"
          ><el-button type="success">导入</el-button></el-upload
        >
        <el-input v-model="id"></el-input><el-button @click="searchImageById">根据id搜索图片</el-button>
        <img :src="src">
  </div>
</template>

<script>
import { loadLocalFile,FtpUpload, uploadImageToServerOriginalName,uploadFileToBytes,getImageByteById,getImageFileById } from '../ajax/fileTestApi';
import {uploadImageToServerRandName} from '../ajax/post'
import defaultValue from "../utils/defalutValue"
export default {
    name: "FileTest",
    data() {
        return {
            src:'',
            fileList: [], // 图片上传列表
            path: "",
            id: null, // 图片数据id
            base64: null, // 文件字节流
        }
    },
    methods: {
        // 导入失败，其中$message为elementui的消息提醒组件
        loadFileError() {
            this.$message({
                message: "文件上传失败!",
                type: "error",
            });
        },
        loadFileSuccess() {
            this.$message({
                message: "文件上传成功!",
                type: "success",
            });
        },
        // 导入前检查文件
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        console.log("上传大小不能超过 2MB!");
        this.$message({
          message: "上传大小不能超过 2MB!",
          type: "error",
        });
      }
      return isLt2M;
    },
    // 导入文件
    uploadFile(param){
      const File = param.file;
      let formDataInfo = new FormData();
      formDataInfo.append("file", File);

      // formDataInfo.append("path",this.path)
      //   loadLocalFile(formDataInfo).then((res) => {
      //   console.log(res);
      //     this.fileList = [];
      //       this.$message({
      //         message: res.data.msg,
      //         type: "success",
      //       });
      //   });

      // ftp上传文件
      // uploadImageToServerRandName(formDataInfo).then((res) => {
      //     this.fileList = [];
      //     console.log(res);
      //       this.$message({
      //         message: res.data.msg,
      //         type: "success",
      //       });
      //       this.GoodSForm.goodsImage = res.data.msg;
      //   });

      // 上传文件为字节流
      uploadFileToBytes(formDataInfo).then(res => {
        console.log("编号数据:",res);
      })
    },

    // 根据id搜索图片信息
    searchImageById() {
      // 根据编号直接展示到img图片
      this.src=defaultValue.baseURL+"/shopBack/file/getImageFileById?id="+this.id
      // 下载图片
      // window.location.href = defaultValue.baseURL+"/shopBack/file/getImageFileById?id="+this.id;

    }
    }
}
</script>

<style>

</style>